<script setup lang="ts">
import { openTelegramShare, openTwitterShare } from './helpers';

const props = withDefaults(defineProps<{
  loading?: boolean;
  shareUrl: string;
  text?: string;
}>(), {
  loading: false,
  text: '',
});
</script>

<template>
  <div class="w-full flex gap-4 bg-sys-layer-c px-5 py-4 text-center mobile:(rounded-b-4)">
    <div class="flex-1">
      <AButton
        class="ant-cover__Button-3d-primary block !w-full"
        type="primary"
        :loading="props.loading" :disabled="props.loading"
      >
        <TCopy :source="`${props.shareUrl}\n${props.text}`" :nthParent="1" class="flex-inline align-middle text-4" />
      </AButton>
      <div class="mt-2 text-3 text-sys-text-body">
        COPY
      </div>
    </div>
    <div class="flex-1">
      <AButton
        type="primary" class="ant-cover__Button-3d-primary block !w-full"
        :loading="props.loading" :disabled="props.loading"
        @click="openTwitterShare({ url: props.shareUrl, text: props.text })"
      >
        <i class="i-ri:twitter-x-fill text-5" />
      </AButton>
      <div class="mt-2 text-3 text-sys-text-body">
        TWITTER
      </div>
    </div>
    <div class="flex-1">
      <AButton
        type="primary" class="ant-cover__Button-3d-primary block !w-full"
        :loading="props.loading" :disabled="props.loading"
        @click="openTelegramShare({ url: props.shareUrl, text: props.text })"
      >
        <i class="i-ri:telegram-2-fill text-5" />
      </AButton>
      <div class="mt-2 text-3 text-sys-text-body">
        TELEGRAM
      </div>
    </div>
  </div>
</template>
